
<template>
  <div>
    <div class="container">
        <div id="echart"></div>
    </div>
  </div>
</template>


<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {};
  },
  // 页面初始化挂载dom
  mounted() {
    this.getLoadEcharts();
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(
        document.getElementById("echart")
      );
      var colorList = ["#4FE894", "#EF0C27", "#FEE7EA"];
      var data = [
        {
          name: '验证中心1',
          x: 400,
          y: 400,
          value: [450, 200],
          fixed: true,
          symbol:
            'image://',
          symbolSize: [120, 80],
          label: {
            color: '#000',
            position: 'bottom',
          },
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#157eff',
                },
                {
                  offset: 1,
                  color: '#35c2ff',
                },
              ]),
            },
          },
        },
        {
          name: '验证中心',
          x: 400,
          y: 400,
          value: [400, 200],
          fixed: true,
          symbol:
            'image://',
          symbolSize: [30, 30],
          label: {
            color: '#000',
            position: 'bottom',
          },
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#157eff',
                },
                {
                  offset: 1,
                  color: '#35c2ff',
                },
              ]),
            },
          },
        },
        {
          name: '验证中心2',
          x: 400,
          y: 400,
          value: [350, 200],

          fixed: true,
          symbol:
            'image://',
          symbolSize: [120, 80],
          label: {
            color: '#000',
            position: 'bottom',
          },
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#157eff',
                },
                {
                  offset: 1,
                  color: '#35c2ff',
                },
              ]),
            },
          },
        },

        {
          name: '计算中心1',
          x: 400,
          y: 400,
          value: [300, 50],

          fixed: true,
          symbol:
            'image://',
          symbolSize: [150, 80],
          label: {
            color: '#000',
            position: 'bottom',
          },
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#157eff',
                },
                {
                  offset: 1,
                  color: '#35c2ff',
                },
              ]),
            },
          },
        },
        {
          name: '计算中心2',
          x: 400,
          y: 400,
          value: [500, 50],

          fixed: true,
          symbol:
            'image://',
          symbolSize: [120, 80],
          label: {
            color: '#000',
            position: 'bottom',
          },
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#157eff',
                },
                {
                  offset: 1,
                  color: '#35c2ff',
                },
              ]),
            },
          },
        },
        {
          name: '业务数据1',
          symbol:
            'image://',
          symbolSize: [60, 30],
          label: {
            color: '#000',
            position: 'bottom',
          },
          value: [100, 400],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402',
                },
                {
                  offset: 1,
                  color: '#ffdc84',
                },
              ]),
            },
          },
        },
        {
          name: '业务数据2',
          symbol:
            'image://',
          symbolSize: [60, 30],
          label: {
            color: '#000',
            position: 'bottom',
          },
          value: [200, 400],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402',
                },
                {
                  offset: 1,
                  color: '#ffdc84',
                },
              ]),
            },
          },
        },
        {
          name: '业务数据3',
          symbol:
            'image://',
          symbolSize: [60, 30],
          label: {
            color: '#000',
            position: 'bottom',
          },
          value: [300, 400],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402',
                },
                {
                  offset: 1,
                  color: '#ffdc84',
                },
              ]),
            },
          },
        },
        {
          name: '业务数据4',
          symbol:
            'image://',
          symbolSize: [60, 30],
          label: {
            color: '#000',
            position: 'bottom',
          },
          value: [400, 400],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402',
                },
                {
                  offset: 1,
                  color: '#ffdc84',
                },
              ]),
            },
          },
        },
        {
          name: '业务数据5',
          symbol:
            'image://',
          symbolSize: [60, 30],
          label: {
            color: '#000',
            position: 'bottom',
          },
          value: [500, 400],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402',
                },
                {
                  offset: 1,
                  color: '#ffdc84',
                },
              ]),
            },
          },
        },
        {
          name: '业务数据6',
          symbol:
            'image://',
          symbolSize: [60, 30],
          label: {
            color: '#000',
            position: 'bottom',
          },
          value: [600, 400],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402',
                },
                {
                  offset: 1,
                  color: '#ffdc84',
                },
              ]),
            },
          },
        },
        {
          name: '公正方1',
          symbol:
            'image://',
          symbolSize: [60, 60],
          label: {
            color: '#000',
            position: 'bottom',
          },
          value: [700, 300],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402',
                },
                {
                  offset: 1,
                  color: '#ffdc84',
                },
              ]),
            },
          },
        },
        {
          name: '公正方2',
          symbol:
            'image://',
          symbolSize: [60, 60],
          label: {
            color: '#000',
            position: 'bottom',
          },
          value: [700, 350],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402',
                },
                {
                  offset: 1,
                  color: '#ffdc84',
                },
              ]),
            },
          },
        },
      ];
      var option = {
        // backgroundColor: '#000',
        xAxis: {
          show: false,
          type: 'value',
        },
        yAxis: {
          show: false,
          type: 'value',
        },
        grid: {
          left: 50,
          right: 60,
          top: 30,
          bottom: 30,
        },
        tooltip: {},
        series: [
          {
            type: 'graph',
            zlevel: 5,
            draggable: false,
            coordinateSystem: 'cartesian2d', // 使用二维的直角坐标系（也称笛卡尔坐标系）
            symbol: 'rect',
            symbolOffset: ['15%', 0],
            label: {
              normal: {
                show: true,
              },
            },
            data: data,
            links: [
              {
                source: '业务数据1',
                target: '回乡证',
              },
              {
                source: '业务数据2',
                target: '回乡证',
              },
              {
                source: '业务数据3',
                target: '回乡证',
              },
              {
                source: '业务数据4',
                target: '回乡证',
              },
              {
                source: '业务数据5',
                target: '回乡证',
                lineStyle: {
                  normal: {
                    color: 'red',
                    curveness: 0.3,
                  },
                },
              },
              {
                source: '业务数据6',
                target: '回乡证',
              },
              {
                source: '业务数据7',
                target: '回乡证',
              },
              {
                source: '回乡证',
                target: '上海库',
              },
              {
                source: '回乡证',
                target: '深圳库',
              },
              {
                source: '辅助验放1',
                target: '回乡证',
              },
              {
                source: '辅助验放2',
                target: '回乡证',
              },
            ],
            /** 设置服务器件的连线样式*/
            lineStyle: {
              normal: {
                opacity: 1,
                color: '#53B5EA',
                curveness: 0.3,
                width: 2,
              },
            },
          },
          /** 分发点*/
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 5,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: 'pin',
              loop: true,
              color: 'rgba(55,155,255,0.5)',
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.3,
              },
            },
            data: [
              {
                coords: [
                  [100, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [200, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [300, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [400, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [600, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [700, 350],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [700, 300],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [700, 350],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [700, 300],
                  [400, 200],
                ],
              },
            ],
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 4,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: 'pin',
              loop: true,
              color: 'rgba(55,155,255,0.5)',
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.3,
              },
            },
            data: [
              {
                coords: [
                  [100, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [200, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [300, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [400, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [600, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [400, 200],
                  [300, 50],
                ],
              },
              {
                coords: [
                  [400, 200],
                  [500, 50],
                ],
              },
            ],
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: 'pin',
              loop: true,
              color: 'rgba(55,155,255,0.5)',
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.3,
              },
            },
            data: [
              {
                coords: [
                  [100, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [200, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [300, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [400, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [600, 400],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [400, 200],
                  [300, 50],
                ],
              },
              {
                coords: [
                  [400, 200],
                  [500, 50],
                ],
              },
              {
                coords: [
                  [700, 350],
                  [400, 200],
                ],
              },
              {
                coords: [
                  [700, 300],
                  [400, 200],
                ],
              },
            ],
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 3,
              trailLength: 0.01,
              symbolSize: 14,
              symbol: 'pin',
              loop: true,
              color: 'red',
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.3,
              },
            },
            data: [
              {
                coords: [
                  [500, 400],
                  [400, 200],
                ],
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    }
  }
};

</script>
<style scoped>
.container{
    width: 500px;
    height: 500px;
    margin-left: 30px;
    margin-top: 30px;
}
#echart{
    width: 100%;
    height: 100%;
}
</style>
